<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>尚硅谷-尚优选前台项目</title>
  <link rel="stylesheet" href="./style/reset.css">
  <link rel="stylesheet" href="./style/index.css">
</head>

<body>
  <div id="app">
    <!-- 用户版块 -->
    <div class="user">
      <div class="wrapper">
        <div class="left">
          <p>欢迎来到尚优选！请</p>
          <a href="javascript:;" class="login">登录</a>
          <a href="javascript:;" class="register">注册</a>
        </div>
        <div class="right">
          <ul>
            <li><a href="javascript:;">我的订单</a></li>
            <li><a href="javascript:;">我的购物车</a></li>
            <li><a href="javascript:;">我的尚优选</a></li>
            <li><a href="javascript:;">尚优选会员</a></li>
            <li><a href="javascript:;">企业采购</a></li>
            <li><a href="javascript:;">关注尚优选</a></li>
            <li><a href="javascript:;">合作招商</a></li>
            <li><a href="javascript:;">商家后台</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头部版块 -->
    <div class="header">
      <div class="wrapper">
        <div class="left">
          <a href="javascript:;">
            <img src="./images/logo.png" class="logo">
          </a>
        </div>
        <div class="right">
          <input type="text" class="search-content" placeholder="请输入搜索内容">
          <button class="search-button">搜索</button>
        </div>
      </div>
    </div>
    <!-- 分类版块 -->
    <div class="category">
      <div class="wrapper">
        <div class="all">全部商品分类</div>
        <ul>
          <li><a href="javascript:;">服装城</a></li>
          <li><a href="javascript:;">美妆馆</a></li>
          <li><a href="javascript:;">尚优选超市</a></li>
          <li><a href="javascript:;">全球购</a></li>
          <li><a href="javascript:;">闪购</a></li>
          <li><a href="javascript:;">团购</a></li>
          <li><a href="javascript:;">有趣</a></li>
          <li><a href="javascript:;">秒杀</a></li>
        </ul>
      </div>
    </div>
    <!-- 内容版块 -->
    <div class="content">
      <div class="wrapper">
        <!-- 面包屑版块 -->
        <div class="breadcrumb">
          <!-- <a href="javascript:;">手机、数码、通讯</a>
          <span>/</span>
          <a href="javascript:;">手机</a>
          <span>/</span>
          <a href="javascript:;">Apple苹果</a>
          <span>/</span>
          <a href="javascript:;">iphone 6S系</a> -->
        </div>
        <!-- 详情版块 -->
        <div class="detail">
          <div class="left">
            <div class="top">
              <img src="./images/s1.png" id="small-pic">
              <!-- 蒙版版块 -->
              <div class="mask"></div>
            </div>
            <!-- 放大镜版块 -->
            <div class="magnifier">
              <img src="./images/b1.png" id="big-pic">
            </div>
            <div class="bottom">
              <button class="left-button">&lt;</button>
              <!-- 轮播图版块 -->
              <div class="carousel">
                <ul>
                  <!-- <li class="carousel-item">
                    <img src="./images/s1.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s2.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s3.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s1.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s2.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s3.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s1.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s2.png">
                  </li>
                  <li class="carousel-item">
                    <img src="./images/s3.png">
                  </li> -->
                </ul>
              </div>
              <button class="right-button">&gt;</button>
            </div>
          </div>
          <div class="right">
            <div class="top">
              <!-- <p class="title">Apple iPhone 6s (A1700) 64G玫瑰金色 移动通信电信4G手机bbb123</p>
              <p class="recommend">推荐选择下方[移动优惠购]，手机套餐齐搞定，不用换号，每月还有花费返</p>
              <div class="price">
                <div id="price">
                  <div>
                    <span>价&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                    <div class="money">
                      <span>￥</span>
                      <span>5299</span>
                      <span>降价通知</span>
                    </div>
                  </div>
                  <div>
                    <span>促&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                    <div>
                      <span class="mark">加价购</span>
                      <span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</span>
                    </div>
                  </div>
                </div>
                <div id="comment">
                  <span>累计评价</span>
                  <span>670000</span>
                </div>
              </div>
              <p class="support">
                <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                <span>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</span>
              </p>
              <p class="address">
                <span>配 送 至</span>
                <span>广东省 深圳市 宝安区</span>
              </p> -->
            </div>
            <div class="bottom">
              <ul class="attrs">
                <!-- <li class="attrs-item">
                  <span class="item-content">银色</span>
                  <button class="delete-button">X</button>
                </li>
                <li class="attrs-item">
                  <span class="item-content">128G</span>
                  <button class="delete-button">X</button>
                </li>
                <li class="attrs-item">
                  <span class="item-content">移动版</span>
                  <button class="delete-button">X</button>
                </li>
                <li class="attrs-item">
                  <span class="item-content">电信优惠版</span>
                  <button class="delete-button">X</button>
                </li> -->
              </ul>
              <ul class="sales">
                <!-- <li class="sales-item">
                  <span class="sales-item-title">选择颜色</span>
                  <ul class="sales-value">
                    <li class="sales-value-item active">金色</li>
                    <li class="sales-value-item">银色</li>
                    <li class="sales-value-item">黑色</li>
                  </ul>
                </li>
                <li class="sales-item">
                  <span class="sales-item-title">内存容量</span>
                  <ul class="sales-value">
                    <li class="sales-value-item active">16G</li>
                    <li class="sales-value-item">64G</li>
                    <li class="sales-value-item">128G</li>
                    <li class="sales-value-item">256G</li>
                  </ul>
                </li>
                <li class="sales-item">
                  <span class="sales-item-title">选择版本</span>
                  <ul class="sales-value">
                    <li class="sales-value-item active">公开版</li>
                    <li class="sales-value-item">移动版</li>
                  </ul>
                </li>
                <li class="sales-item">
                  <span class="sales-item-title">购买方式</span>
                  <ul class="sales-value">
                    <li class="sales-value-item active">官方标配</li>
                    <li class="sales-value-item">优惠移动版</li>
                    <li class="sales-value-item">电信优惠版</li>
                  </ul>
                </li> -->
              </ul>
              <div>
                <div>
                  <span class="goods-number"></span>
                  <div>
                    <button class="plus-button">+</button>
                    <button class="minus-button">-</button>
                  </div>
                </div>
                <button class="add-to-cart">加入购物车</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 参数版块 -->
    <div class="param">
      <div class="wrapper">
        <div class="left">
          <div class="tab">
            <a href="javascript:;" class="tab-item active">相关分类</a>
            <a href="javascript:;" class="tab-item">推荐品牌</a>
          </div>
          <div class="tab-content active">
            <ul>
              <li>手机</li>
              <li>手机壳</li>
              <li>内存卡</li>
              <li>iPhone配件</li>
              <li>贴膜</li>
              <li>手机耳机</li>
              <li>移动电源</li>
              <li>平板电脑</li>
            </ul>
            <ul>
              <li>
                <img src="./images/part01.png">
                <p>Apple苹果iPhone 6s(A1699)</p>
                <span>￥6088.00</span>
                <button>加入购物车</button>
              </li>
              <li>
                <img src="./images/part01.png">
                <p>Apple苹果iPhone 6s(A1699)</p>
                <span>￥6088.00</span>
                <button>加入购物车</button>
              </li>
              <li>
                <img src="./images/part01.png">
                <p>Apple苹果iPhone 6s(A1699)</p>
                <span>￥6088.00</span>
                <button>加入购物车</button>
              </li>
            </ul>
          </div>
          <div class="tab-content">测试</div>
        </div>
        <div class="right">
          <div class="top">
            <div class="right-title">选择搭配</div>
            <div class="right-content">
              <div class="right-left">
                <div class="base-good">
                  <img src="./images/l-m01.png">
                  <span>￥5299</span>
                </div>
                <div>+</div>
                <ul>
                  <li>
                    <img src="./images/dp01.png">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp02.png">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp03.png">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp04.png">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox">
                      <span>50</span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="right-right">
                <p>已购0件商品</p>
                <p>套餐价</p>
                <p class="price">￥5299</p>
                <button>加入购物车</button>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="tab">
              <a href="javascript:;" class="active tab-item">商品介绍</a>
              <a href="javascript:;" class="tab-item">规格包装</a>
              <a href="javascript:;" class="tab-item">售后与保障</a>
              <a href="javascript:;" class="tab-item">商品评价</a>
              <a href="javascript:;" class="tab-item">手机社区</a>
            </div>
            <div class="tab-content active">
              <p>分辨率：1920*1080(FHD)</p>
              <p>后置摄像头：1200万像素</p>
              <p>前置摄像头：500万像素</p>
              <p>核数：其他</p>
              <p>频率：以官网信息为准</p>
              <p>品牌：Apple</p>
              <p>商品名称：APPLEiPhone 6s Plus</p>
              <p>商品编号：1861098</p>
              <p>商品产地：中国大陆</p>
              <p>商品毛重：0.51kg</p>
              <p>热点：指纹识别，Apple Pay，金属机身，拍照神器</p>
              <p>系统：苹果(IOS)</p>
              <p>像素：1000-1600万品毛重：0.51kg</p>
              <img src="./images/intro01.png" alt="">
              <img src="./images/intro02.png" alt="">
              <img src="./images/intro03.png" alt="">
            </div>
            <div class="tab-content">测试</div>
            <div class="tab-content">测试</div>
            <div class="tab-content">测试</div>
            <div class="tab-content">测试</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航版块 -->
    <div class="nav">
      <div class="nav-buttons">
        <div class="show-buttons">
          <button class="open-button active">open</button>
        </div>
        <ul class="navs-buttons">
          <li class="navs-buttons-item">
            <span>一</span>
            <span>尚选会员</span>
          </li>
          <li class="navs-buttons-item">
            <span>二</span>
            <span>尚选会员</span>
          </li>
          <li class="navs-buttons-item">
            <span>三</span>
            <span>尚选会员</span>
          </li>
          <li class="navs-buttons-item">
            <span>四</span>
            <span>尚选会员</span>
          </li>
          <li class="navs-buttons-item">
            <span>五</span>
            <span>尚选会员</span>
          </li>
          <li class="navs-buttons-item">
            <span>六</span>
            <span>尚选会员</span>
          </li>
        </ul>
      </div>
      <div class="nav-content"></div>
    </div>
  </div>
  <script src="./js/data.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>